<template>
  <div class="block">
    <div class="flex max-width">
      <div
        :class="showCellIds ? 'func-active' : 'func'"
        @click="changeShowCellIdsStatus"
      >
        <img src="../../assets/mesh_num.svg" alt="" class="icon" />
        <span class="func-name">网格编号</span>
      </div>
      <div class="fill"></div>
      <div @click="queryIdsStatus" class="func">
        <img src="../../assets/mesh_num.svg" alt="" class="icon" />
        <span class="func-name">查询编号</span>
      </div>
      <div class="fill"></div>
      <div @click="changeRenumberingCellIdsStatus" class="func">
        <img src="../../assets/mesh_num.svg" alt="" class="icon" />
        <span class="func-name">重新编号</span>
      </div>
      <div class="fill"></div>
      <div
        :class="selectMeshByBoxStatus ? 'func-active' : 'func'"
        @click="changeBoxStatus('mesh')"
      >
        <img src="../../assets/mesh_select.svg" alt="" class="icon" />
        <span class="func-name">网格框选</span>
      </div>
      <div class="fill"></div>
      <div
        :class="normalSelectMeshPointStatus ? 'func-active' : 'func'"
        @click="selectPointStatus()"
      >
        <img src="../../assets/mesh_node_select.svg" alt="" class="icon" />
        <span class="func-name">选点</span>
      </div>
      <div
        :class="selectMeshPointByBoxStatus ? 'func-active' : 'func'"
        @click="changeBoxStatus('meshPoint')"
      >
        <img src="../../assets/mesh_node_box_select.svg" alt="" class="icon" />
        <span class="func-name">节点框选</span>
      </div>
      <div
        :class="createMeshByPointStatus ? 'func-active' : 'func'"
        @click="createMeshByPoint()"
      >
        <img src="../../assets/create_mesh_by_node.svg" alt="" class="icon" />
        <span class="func-name">节点生成网格</span>
      </div>
      <div class="fill"></div>
      <!-- <div :class="'func'" @click="mergeMesh()">
        <img src="../../assets/mesh_select.svg" alt="" class="icon" />
        <span class="func-name">网格合并</span>
      </div> -->
      <div
        :class="meshSplitStatus ? 'func-active' : 'func'"
        @click="meshSplit()"
      >
        <img src="../../assets/meshSegmentation.svg" alt="" class="icon" />
        <span class="func-name">网格分割</span>
      </div>
      <div :class="meshSplitStatus ? 'func-active' : 'func'" @click="offset()">
        <img src="../../assets/meshSegmentation.svg" alt="" class="icon" />
        <span class="func-name">偏移</span>
      </div>
      <div
        :class="meshSplitStatus ? 'func-active' : 'func'"
        @click="showMidSurfaceThickness()"
      >
        <img src="../../assets/meshSegmentation.svg" alt="" class="icon" />
        <span class="func-name">中面网格厚度显隐</span>
      </div>
      <div v-for="item in meshEditToolMenu" :key="item.label" class="flex">
        <div class="fill"></div>
        <div :class="'func'" @click="signal(item.clickSignal)">
          <img
            v-if="item.label == '交换'"
            src="../../assets/exchange.svg"
            alt=""
            class="icon"
          />
          <img
            v-else-if="item.label == '填孔'"
            src="../../assets/holeFilling.svg"
            alt=""
            class="icon"
          />
          <img
            v-else-if="item.label == '移除穿透'"
            src="../../assets/removePenetration.svg"
            alt=""
            class="icon"
          />
          <img v-else src="../../assets/mesh_select.svg" alt="" class="icon" />
          <span class="func-name">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="title">网格编辑</div>
    <FillHoleModal></FillHoleModal>
    <RemovePenetrationModal></RemovePenetrationModal>
    <SplitModal></SplitModal>
    <StretchModal></StretchModal>
    <SwapModal></SwapModal>
    <SweepModal></SweepModal>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useCoreStore, _global } from "@/UI/store";
import { useRoute } from "vue-router";
import { STATUS_CODE } from "@/FrontProcessing";
import { meshEditToolMenu } from "@/UI/config";

import FillHoleModal from "@/UI/components/MeshEdit/FillHoleModal.vue";
import RemovePenetrationModal from "@/UI/components/MeshEdit/RemovePenetrationModal.vue";
import SplitModal from "@/UI/components/MeshEdit/SplitModal.vue";
import StretchModal from "@/UI/components/MeshEdit/StretchModal.vue";
import SwapModal from "@/UI/components/MeshEdit/SwapModal.vue";
import SweepModal from "@/UI/components/MeshEdit/SweepModal.vue";

import { useMeshEditStore } from "@/UI/store/meshEditStore";
const meshEditStore = useMeshEditStore();
// const { setFillHoleModalActive } = storeToRefs(meshEditStore);

const coreStore = useCoreStore();
const route = useRoute();

const showCellIds = ref(false);
// 框选网格
const selectMeshByBoxStatus = ref(false);
// 框选网格交叉点
const selectMeshPointByBoxStatus = ref(false);
// 选择网格节点（鼠标点选）
const normalSelectMeshPointStatus = ref(false);
const normalSelectSinglePointStatus = ref(false);
const normalSelectSingleLineStatus = ref(false);
const createMeshByPointStatus = ref(false);
function changeRenumberingCellIdsStatus() {
  // if (showCellIds.value) {
  //   showCellIds.value = false;
  //   // _global.Engine.meshComp.hindSeletedCellIds();
  // } else {
  //   showCellIds.value = true;
  //   coreStore.setreNumberActiveModal(true);
  // }
  coreStore.setreNumberActiveModal(true);
}
const meshSplitStatus = ref(false);
const showHiddenMidSurfaceThickness = ref(true);
function offset() {
  coreStore.setOffsetActiveModal(true);
}
function changeShowCellIdsStatus() {
  if (showCellIds.value) {
    showCellIds.value = false;
    _global.Engine.meshComp.hindSeletedCellIds();
  } else {
    showCellIds.value = true;
    _global.Engine.meshComp.showSelectedCellIds();
  }
}
function queryIdsStatus() {
  _global.Engine.meshComp.showSelectedNodeIds();
}
function showMidSurfaceThickness() {
  showHiddenMidSurfaceThickness.value = !showHiddenMidSurfaceThickness.value;
  _global.Engine.defeature.show_mid_surface_thickness(
    showHiddenMidSurfaceThickness.value
  );
}
function createMeshByPoint() {
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return { partId: value.partId, nodeId: value.nodeId };
    }
  );
  if (selectedPoints.length < 3) {
    alert("至少需要三个点才能生成网格！");
    return;
  } else if (selectedPoints.length > 4) {
    alert("至多需要四个点才能生成网格！");
    return;
  } else if (selectedPoints.length == 3 || selectedPoints.length == 4) {
    // 创建网格前，需要先删除已选择点~
    _global.Engine.selectBoxComp.resetSelectedMeshPoint();
    _global.Engine.cell.create(selectedPoints).then((res) => {
      console.log("节点已生成");
    });
  }
}
// 监听esc
coreStore.Notify.subscribe(({ event }) => {
  if (event === "engine_ready") {
    _global.Engine.hooks.onEscKeyDown(() => {
      _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
      normalSelectMeshPointStatus.value = false;
      selectMeshByBoxStatus.value = false;
      selectMeshPointByBoxStatus.value = false;
      _global.Engine.selectBoxComp.disableSelectBox();
      _global.Engine.meshComp.unselectAllElements();
      _global.Engine.render.render();
      _global.Engine.unregisterSelectPointRightClick();
      _global.Engine.registerNormalRightClick();
    });
  }
});

// 选择网格节点（鼠标点选）
function selectPointStatus() {
  if (normalSelectMeshPointStatus.value) {
    // 解除点选
    normalSelectMeshPointStatus.value = false;
    _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
    _global.Engine.unregisterSelectPointRightClick(); // 注销 selectPoint 右键鼠标事件
    _global.Engine.registerNormalRightClick(); // 注册normal右键鼠标事件
  } else {
    // 解除框选
    selectMeshByBoxStatus.value = false;
    selectMeshPointByBoxStatus.value = false;
    _global.Engine.selectBoxComp.disableSelectBox();
    // 激活点选
    normalSelectMeshPointStatus.value = true;
    _global.Engine.state.set("Mode", STATUS_CODE.VERTEX_SELECT);
    _global.Engine.unregisterNormalRightClick(); // 注销 normal 右键鼠标事件
    _global.Engine.registerSelectPointRightClick(); // 注册 selectPointc 右键鼠标事件
  }
}

function selectSinglePointStatus() {
  if (normalSelectSinglePointStatus.value) {
    // 解除点选
    normalSelectSinglePointStatus.value = false;
    _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
    _global.Engine.unregisterSelectSinglePointRightClick(); // 注销 selectPoint 右键鼠标事件
    _global.Engine.registerNormalRightClick(); // 注册normal右键鼠标事件
  } else {
    // 解除框选
    selectMeshByBoxStatus.value = false;
    selectMeshPointByBoxStatus.value = false;
    _global.Engine.selectBoxComp.disableSelectBox();
    // 激活点选
    normalSelectSinglePointStatus.value = true;
    _global.Engine.state.set("Mode", STATUS_CODE.SINGLE_POINT_SELECT);
    _global.Engine.unregisterNormalRightClick(); // 注销 normal 右键鼠标事件
    _global.Engine.registerSelectSinglePointRightClick(); // 注册 selectPointc 右键鼠标事件
  }
}
function selectSingleLineStatus() {
  if (normalSelectSingleLineStatus.value) {
    // 解除点选
    normalSelectSingleLineStatus.value = false;
    _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
    _global.Engine.unregisterSelectSingleLineRightClick(); // 注销 selectPoint 右键鼠标事件
    _global.Engine.registerNormalRightClick(); // 注册normal右键鼠标事件
  } else {
    // 解除框选
    selectMeshByBoxStatus.value = false;
    selectMeshPointByBoxStatus.value = false;
    _global.Engine.selectBoxComp.disableSelectBox();
    // 激活点选
    normalSelectSingleLineStatus.value = true;
    _global.Engine.state.set("Mode", STATUS_CODE.SINGLE_LINE_SELECT);
    _global.Engine.unregisterNormalRightClick(); // 注销 normal 右键鼠标事件
    _global.Engine.registerSelectSingleLineRightClick(); // 注册 selectPointc 右键鼠标事件
  }
}
function mergeMesh() {
  const partIdCellIds = _global.Engine.meshComp.getMergePartIdCellIds();
  if (!partIdCellIds) return;
  _global.Engine.mesh
    .merge(partIdCellIds[0], partIdCellIds[1], partIdCellIds[2])
    .then(() => {
      console.log("完成网格合并");
    });
}

function changeBoxStatus(type: string) {
  if (selectMeshByBoxStatus.value || selectMeshPointByBoxStatus.value) {
    // 取消框选
    _global.Engine.registerNormalRightClick(); // 恢复normal右键鼠标事件
    selectMeshByBoxStatus.value = false;
    selectMeshPointByBoxStatus.value = false;
    _global.Engine.selectBoxComp.disableSelectBox();
  } else {
    // 解除点选
    if (normalSelectMeshPointStatus.value) {
      _global.Engine.state.set("Mode", STATUS_CODE.NORMAL);
      normalSelectMeshPointStatus.value = false;
      _global.Engine.unregisterSelectPointRightClick(); // 解除 selectPoint 右键鼠标事件
    }
    // 启动框选
    _global.Engine.unregisterNormalRightClick(); // 注销normal右键鼠标事件
    switch (type) {
      case "mesh":
        selectMeshByBoxStatus.value = true; // 框选网格 图标置灰
        break;
      case "meshPoint":
        selectMeshPointByBoxStatus.value = true; // 框选网格点 图标置灰
        break;
    }
    _global.Engine.selectBoxComp.enableSelectByBox(type);
  }
}
function meshSplit() {
  const selectedPoints = _global.Engine.selectBoxComp.selectedPoints.map(
    (value) => {
      return { partId: value.partId, nodeId: value.nodeId };
    }
  );
  if (selectedPoints.length < 3) {
    alert("至少需要三个点才能进行网格分割！");
    return;
  }
  _global.Engine.selectBoxComp.resetSelectedMeshPoint();
  _global.Engine.mesh.split(selectedPoints).then((res) => {
    console.log("res", res);
  });
}

function signal(signal: string) {
  // switch (signal) {
  //   case "":
  // }
  console.log("signal248", signal);
  if (signal == "mesh_edit_fill_hole") {
    meshEditStore.setFillHoleModalActive(true);
  } else if (signal == "mesh_edit_swap") {
    meshEditStore.setSwapModalActive(true);
  } else if (signal == "mesh_edit_remove_penetration") {
    meshEditStore.setRemovePenetrationModalActive(true);
  } else if (signal == "mesh_edit_split") {
    meshEditStore.setSplitModalActive(true);
  } else if (signal == "mesh_edit_sweep") {
    meshEditStore.setSweepModalActiveActive(true);
  } else if (signal == "mesh_edit_stretch") {
    meshEditStore.setStretchModalActive(true);
  }
}
</script>
<style lang="less" scoped>
@import "../../styles/xxxTool.less";
</style>
